<template>
  <div class="synopsis-content">
    <!-- 轮播图 -->
    <div>
      <swiper :options="swiperOption" ref="mySwiper" style="min-width: 1200px">
        <swiper-slide
          class="swiper-slide swiper-container-3d"
          v-for="(banner, index) in bannerList"
          :key="index"
          style="
            position: relative;
            overflow: hidden;
            width: 100%;
            height: 260px;
          "
        >
          <img
            :src="banner.img"
            style="
              position: absolute;
              top: 0;
              left: 50%;
              width: 1920px;
              height: 260px;
              margin-left: -960px;
            "
          />
        </swiper-slide>
      </swiper>
    </div>
    <div class="sy-body w1280">
      <!-- 面包屑 -->
      <div style="display: flex; align-items: center; margin: 18px">
        <img src="../../assets/home.png" alt="" />
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/Industry' }"
            >资讯中心</el-breadcrumb-item
          >
          <el-breadcrumb-item>行业动态</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="content-body">
        <!-- 菜单栏 -->
        <div class="menu-box">
          <div class="menu-title">
            <img src="../../assets/icon.png" alt="" />
            <span>资讯中心</span>
          </div>
          <div class="menu-item">
            <el-menu
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
              background-color="#FFFFFF"
              text-color="#666666"
              active-text-color="#0056A2"
              router
              :default-active="this.$router.path"
            >
              <el-menu-item index="/Industry">
                <img
                  src="../../assets/right-select.png"
                  style="margin-right: 19px"
                  alt=""
                />
                <span slot="title">行业动态</span>
              </el-menu-item>
              <el-menu-item index="/Association">
                <img
                  src="../../assets/right-none.png"
                  style="margin-right: 19px"
                  alt=""
                />

                <span slot="title">协会动态</span>
              </el-menu-item>
              <el-menu-item index="/Member">
                <img
                  src="../../assets/right-none.png"
                  style="margin-right: 19px"
                  alt=""
                />

                <span slot="title">会员动态</span>
              </el-menu-item>
              <el-menu-item index="/Policy">
                <img
                  src="../../assets/right-none.png"
                  style="margin-right: 19px"
                  alt=""
                />
                <span slot="title">政策法规</span>
              </el-menu-item>
            </el-menu>
          </div>
        </div>
        <!-- 内容栏 -->
        <div class="content-box">
          <div class="content-title">行业动态</div>
          <el-divider></el-divider>
          <div class="content-list">
            <div v-for="(item, index) in dataList" :key="index" @click="gotoDetail">
              <div class="content-item">
                <div class="item-left">
                  <img style="margin-right: 8px;" src="../../assets/point.png" alt="" />
                  <span>{{ item.context }}</span>
                </div>
                <div class="item-right">{{ item.time }}</div>
              </div>
              <el-divider></el-divider>
            </div>
            <div class="pagination">
              <el-pagination
                background
                layout="prev, pager, next"
                :total="1000"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
    
    <script>
export default {
  name: "Industry",
  data() {
    return {
      // 文章列表
      dataList: [
        {
          context: "中鼎资信与省融资再担保有限责任公司签订战略合作协议",
          time: "2023-03-16",
        },
        {
          context: "中鼎资信与省融资再担保有限责任公司签订战略合作协议",
          time: "2023-03-16",
        },
        {
          context: "中鼎资信与省融资再担保有限责任公司签订战略合作协议",
          time: "2023-03-16",
        },
        {
          context: "中鼎资信与省融资再担保有限责任公司签订战略合作协议",
          time: "2023-03-16",
        },
        {
          context: "中鼎资信与省融资再担保有限责任公司签订战略合作协议",
          time: "2023-03-16",
        },
        {
          context: "中鼎资信与省融资再担保有限责任公司签订战略合作协议",
          time: "2023-03-16",
        },
        {
          context: "中鼎资信与省融资再担保有限责任公司签订战略合作协议",
          time: "2023-03-16",
        },
        {
          context: "中鼎资信与省融资再担保有限责任公司签订战略合作协议",
          time: "2023-03-16",
        },
        {
          context: "中鼎资信与省融资再担保有限责任公司签订战略合作协议",
          time: "2023-03-16",
        },
        {
          context: "中鼎资信与省融资再担保有限责任公司签订战略合作协议",
          time: "2023-03-16",
        },
      ],
      //   轮播图配置参数
      swiperOption: {
        loop: true, //是否循环轮播
        speed: 1000, //切换速度
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        //自动轮播
        autoplay: {
          delay: 2000,

          disableOnInteraction: false,
        },
      },
      bannerList: [
        {
          img: require("../../assets/banner1.png"),
        },
      ],
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    gotoDetail(){
      this.$router.push('/Information')
    },
  },
};
</script>
    
    <style scoped>
.synopsis-content {
  background-color: rgb(246, 246, 246);
}
.sy-body {
  /* margin-top: 18px; */
}

.content-body {
  background-color: #fff;
  padding: 30px;
  display: flex;
  margin-bottom: 50px;
}

.content-body .menu-box {
  /* border: 1px solid #dcdadd; */
  flex: 1;
  border-radius: 5px;
  margin-right: 40px;
}

.content-body .content-box {
  flex: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.content-body .content-box .content-title {
  font-size: 28px;
  font-family: Microsoft YaHei;
}

.content-list {
  width: 100%;
}

.pagination{
    display: flex;
    justify-content: center;
}
.content-list .content-item {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  cursor: pointer;
}

.content-list .content-item:hover {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  color: #007aff;
}



.item-right{
    color: #787878;
}
.menu-title {
  background-color: #0056a2;
  color: #fff;
  font-size: 22px;
  display: flex;
  align-items: center;
  padding: 24px 12px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.menu-title span {
  margin-left: 12px;
}

.menu-item {
  border: 1px solid #dcdadd;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.el-dropdown-menu__item,
.el-menu-item {
  font-size: 16px;
}
</style>